<template>
	<view class="u-page">

		<view class="order-tab">
			<view class="tab" :class="{'action':queryList.status==1}" @click="onOrderTab(1)">
				<text>已通过</text>
				<text class="line"></text>
			</view>
			<view class="tab" :class="{'action':queryList.status==2}" @click="onOrderTab(2)">
				<text>待审核</text>
				<text class="line"></text>
			</view>
			<view class="tab" :class="{'action':queryList.status==3}" @click="onOrderTab(3)">
				<text>已驳回</text>
				<text class="line"></text>
			</view>


		</view>
		<view class="" style="width:100%;height:100rpx;"></view>
		<view class="">
			<u-list @scrolltolower="scrolltolower">
				<u-list-item v-for="(item, index) in list" :key="index">
					<view
						style="height: 200rpx;background-color:#fff;margin:10upx 40upx 10upx;padding: 20upx;border-radius: 3%;"
						@click="goGuanggaoRuzhu(item)">
						<u-row customStyle="height:100%">
							<u-col span="4">
								<view class="" style="height: 100%;">
									<u-image :src="item.title_img" width="200rpx" height="160rpx"></u-image>
								</view>
							</u-col>
							<u-col span="8" align="center">
								<u-row customStyle="margin-bottom:10px">
									<view class="">
										{{item.title}}
									</view>
								</u-row>
								<u-row>
									<view class="">
										{{item.ctime}}
									</view>
								</u-row>
							</u-col>

						</u-row>
					</view>
				</u-list-item>
			</u-list>
		</view>
		<view class="" style="margin-top: 200rpx;">

		</view>
		<view class=""
			style="position: fixed;bottom:0px;width: 100%;height: 180rpx; border-top: #555555 solid 1rpx; background-color: #fff;">
			<u-row gutter="10" customStyle="height:100%">
				<!-- <u-col span="6" align="center" justify="center">
					<view style="margin: 0 20rpx 0;">
						<u-button type="primary" shape="circle" text="我的投放" size="large" :plain="true"
							@click="goMytoufang"></u-button>
					</view>
				</u-col> -->
				<u-col span="6">
					<view style="margin: 0 20rpx 0;">
						<u-button type="primary" shape="circle" text="新加" size="large"
							@click="goGuanggaoRuzhu"></u-button>
					</view>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	import {
		getAdvertisement
	} from '@/config/api.js';
	export default {
		data() {
			return {
				indexList: [],
				queryList: {
					nav_id: null,
					store_id: null,
					status: 1,
				},

				list: null,
				urls: [
					'https://cdn.uviewui.com/uview/album/1.jpg',
					'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg',
					'https://cdn.uviewui.com/uview/album/4.jpg',
					'https://cdn.uviewui.com/uview/album/5.jpg',
					'https://cdn.uviewui.com/uview/album/6.jpg',
					'https://cdn.uviewui.com/uview/album/7.jpg',
					'https://cdn.uviewui.com/uview/album/8.jpg',
					'https://cdn.uviewui.com/uview/album/9.jpg',
					'https://cdn.uviewui.com/uview/album/10.jpg',
				]
			}
		},
		onLoad(option) {
			console.log(option)
			if (option.nav_id) {
				this.queryList.nav_id = option.nav_id;
				this.queryList.store_id = option.store_id;
				this.getLists()
			}
			// this.loadmore()
			uni.setStorageSync('adInfo', '')
		},

		methods: {
			onOrderTab(n) {
				this.queryList.status = n;
				this.getLists();
			},
			getLists() {
				getAdvertisement(this.queryList).then(res => {
					this.list = res.data;
				})
			},
			// 广告入驻
			goGuanggaoRuzhu(data) {
				uni.setStorageSync('adInfo', '')
				let str =
					`/moduleA/customAdvertising/paimaisave?nav_id=${this.queryList.nav_id}&store_id=${this.queryList.store_id}`;
				if (data) {
					uni.setStorageSync('adInfo', data)
					str += '&id=' + data.id
				}
				uni.navigateTo({
					url: str
				})
			},
			// 我的投放
			goMytoufang() {
				uni.navigateTo({
					url: '/moduleA/toufang/toufang'
				})
			},
			// 广告详情页
			goXiangqing(data) {
				uni.setStorageSync('adInfo', data)
				uni.navigateTo({
					url: '/moduleA/guanggaoxiangqing/paimaixiangqing'
				})
			},
			scrolltolower() {
				this.loadmore()
			},
			loadmore() {
				for (let i = 0; i < 30; i++) {
					this.indexList.push({
						url: this.urls[uni.$u.random(0, this.urls.length - 1)]
					})
				}
			}
		},
	}
</script>
<style scoped lang="scss">
	/* 订单tab */
	.order-tab {
		position: fixed;
		left: 0;
		top: 0rpx;
		/* #ifdef APP-PLUS */
		top: calc(50rpx + var(--status-bar-height));
		/* #endif */
		z-index: 10;
		display: flex;
		align-items: center;
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;

		.tab {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 25%;
			height: 80%;

			text {
				font-size: 26rpx;
				color: #959595;
			}
		}

		.action {
			text {
				color: #222222;
			}

			.line {
				position: absolute;
				left: 50%;
				bottom: 0;
				width: 60rpx;
				height: 6rpx;
				background: linear-gradient(to right, $base, #f6f6f6);
				transform: translate(-50%, 0);
			}
		}
	}
</style>